<template>
  <div class="chat-info-group text-center">
    <div class="chat-info-group-header" @click="toggleContext">
      <h1 class="mb-0 text-left">{{msg}}</h1>
      <p>{{aaa}} 变量重名则会依据setup,因为setup在data之后触发</p>
      <p>
        For a guide and recipes on how to configure / customize this project,
        <br />check out the
        <a
          href="https://cli.vuejs.org"
          target="_blank"
          rel="noopener"
        >vue-cli documentation</a>.
      </p>
    </div>

    <!-- 仅针对v-if和v-show指令的元素提供过渡动画 -->
    <transition name="fade">
      <div class="chat-info-group-body" id="shared-context" v-show="contextVisible">
        <!-- class=" collapse show" :class="{'show': contextVisible}" -->
        <div class="chat-info-group-content">
          <template v-for="(item, i1) in aLink" :key="i1">
            <h3>{{item.h3}}</h3>
            <ul>
              <li v-for="(link, i2) in item.ul" :key="i2">
                <a :href="link.link" target="_blank" rel="noopener">{{link.text}}</a>
              </li>
            </ul>
          </template>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
import { defineComponent, watchEffect, ref } from "vue";
import axios from "axios";
export default defineComponent({
  name: "common-props",
  props: {
    msg: String,
    aLink: Array,
  },
  data() {
    return {
      aaa: 1,
    };
  },
  beforeCreate() {
    console.log("beforeCreate");
    this.aaa = 11;
    console.log(this.$data, this.aaa);
  },
  setup(props, context) {
    console.log("setup", context.attrs);
    watchEffect(() => {
      console.log(props.msg, props.aLink);
    });

    const contextVisible = ref(true);
    const toggleContext = () => {
      contextVisible.value = !contextVisible.value;
    };

    return {
      contextVisible,
      toggleContext,
      aaa: 33,
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

/* `transition name="fade"` */
.fade-enter-active {
  animation: fadeOutUp 0.5s reverse;
}
.fade-leave-active {
  animation: fadeOutUp 0.5s;
}

/* fadeInDown */
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

/* fadeOutUp */
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -70%, 0);
    transform: translate3d(0, -70%, 0);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -70%, 0);
    transform: translate3d(0, -70%, 0);
  }
}
.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
</style>
